<template>
  <a-drawer width="35%" :label-col="4" :wrapper-col="14" :visible="open" @close="onClose">
    <a-divider orientation="left">
      <b>新增请假申请</b>
    </a-divider>
    <a-form-model ref="form" :model="form" :rules="rules">
      <a-form-model-item
        label="开始时间"
        has-feedback
        :labelCol="{span: 5}"
        :wrapperCol="{span: 15}"
        prop="leaveBegin"
      >
        <a-date-picker
          placeholder="请选择开始时间"
          v-model="form.leaveBegin"
          format="YYYY-MM-DD HH:mm:ss"
          :showTime="{ initialValue: moment('00:00:00', 'HH:mm:ss') }"
          allow-clear></a-date-picker>
      </a-form-model-item>
      <a-form-model-item
        label="结束时间"
        has-feedback
        :labelCol="{span: 5}"
        :wrapperCol="{span: 15}"
        prop="leaveEnd"
      >
        <a-date-picker
          placeholder="请选择结束时间"
          v-model="form.leaveEnd"
          format="YYYY-MM-DD HH:mm:ss"
          :showTime="{ initialValue: moment('00:00:00', 'HH:mm:ss') }"
          @change="changeLeaveTime"
          allow-clear></a-date-picker>
      </a-form-model-item>
      <a-form-model-item
        label="请假天数"
        has-feedback
        :labelCol="{span: 5}"
        :wrapperCol="{span: 15}"
        prop="leaveDay"
      >
        <a-input placeholder="请选择请假开始和结束时间" v-model="form.leaveDay" disabled="disabled" />
      </a-form-model-item>
      <a-form-model-item
        label="请假原因"
        has-feedback
        :labelCol="{span: 5}"
        :wrapperCol="{span: 15}"
        prop="leaveReason"
      >
        <a-input placeholder="请填写请假原因" v-model="form.leaveReason" type="textarea" allow-clear />
      </a-form-model-item>
    </a-form-model>
    <div class="bottom-control">
      <a-space>
        <a-button type="primary" @click="submitForm">
          保存
        </a-button>
        <a-button type="dashed" @click="cancel">
          取消
        </a-button>
      </a-space>
    </div>
  </a-drawer>
</template>
<script>
import { getLeave, saveLeave, updateLeave } from '@/api/demo/apply/leave'
import moment from 'moment'
import { mapGetters } from 'vuex'

export default {
  components: {},
  props: {},
  data () {
    return {
      open: false,
      // 流程状态
      form: {
        leaveDay: undefined,
        leaveBegin: undefined,
        leaveEnd: undefined,
        leaveReason: undefined
      },
      rules: {
        leaveDay: [{ required: true, message: '请假天数不能为空', trigger: 'blur' }],
        leaveBegin: [{ required: true, message: '开始时间不能为空', trigger: 'blur' }],
        leaveEnd: [{ required: true, message: '结束时间不能为空', trigger: 'blur' }],
        leaveReason: [{ required: true, message: '请假原因不能为空', trigger: 'blur' }]
      }
    }
  },
  watch: {},
  computed: {
    ...mapGetters(['userId'])
  },
  methods: {
    rest () {
      this.form = {
        leaveDay: undefined,
        leaveBegin: undefined,
        leaveEnd: undefined,
        leaveReason: undefined
      }
    },
    // 取消按钮
    cancel () {
      this.open = false
      this.reset()
    },
    showForm (id) {
      this.open = true
      this.rest()
      if (id) {
        getLeave(id).then(res => {
          if (res.code === 200) {
            this.form = res.data
          }
        })
      }
    },
    onClose () {
      this.open = false
    },
    submitForm () {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.form.leaveBegin = moment(this.form.leaveBegin).format('YYYY-MM-DD HH:mm:ss')
          this.form.leaveEnd = moment(this.form.leaveEnd).format('YYYY-MM-DD HH:mm:ss')
          if (this.form.applyId) {
            updateLeave(this.form).then(res => {
              if (res.code === 200) {
                this.$message.success(
                  '修改成功',
                  3
                )
                this.open = false
                this.$emit('ok')
              }
            })
          } else {
            saveLeave(this.form).then(res => {
              if (res.code === 200) {
                this.$message.success(
                  '添加成功',
                  3
                )
                this.open = false
                this.$emit('ok')
                this.$router.push({ path: '/leave-apply-view', query: { id: res.data } })
              }
            })
          }
        }
      })
    },
    changeLeaveTime () {
      if (this.form.leaveBegin && this.form.leaveEnd) {
        const begin = moment(this.form.leaveBegin).format('YYYY-MM-DD HH:mm:ss')
        const end = moment(this.form.leaveEnd).format('YYYY-MM-DD HH:mm:ss')
        const date = new Date(end).getTime() - new Date(begin).getTime()
        this.form.leaveDay = (date / (24 * 3600 * 1000)).toFixed(1)
      }
    }
  },
  created () {
    this.rest()
  },
  mounted () {
  }
}
</script>,
